<template>
  <div>
    <!-- 遮罩 -->
    <div class="shade" @click="close" v-if="show">
      <div class="slider">
        <div class="slider-item" v-for="(img, index) in data" v-if="imgIndex == index"
             @click="showSlides(imgIndex += 1)">
          <img :src="img.src" style="height: 90vh;max-height: 800px">
          <div class="_detail">
            <span>{{img.alt}}</span>
            <span class="right">第 {{imgIndex + 1}} 张, 共 {{data.length}} 张</span>
          </div>
        </div>
      </div>
      <a class="prev" v-if="data.length > 1" @click="showSlides(imgIndex -= 1)">❮</a>
      <a class="next" v-if="data.length > 1" @click="showSlides(imgIndex += 1)">❯</a>
    </div>
  </div>
</template>

<script lang="ts">
  import {Component, Model, Prop, Vue, Watch} from 'vue-property-decorator'

  @Component
  export default class popup extends Vue {
    name:string = "popup"; // 弹窗组件
    @Prop() show;
    @Prop() data: Array<any>;
    imgIndex: number = 0;

    close(event) {
      if (event.target !== event.currentTarget) return;
      this.$emit('close')
    }
    /**
     * 改变当前页
     * @param page 当前页
     */
    showSlides(page) {
      let imgLength = this.data.length;
      if (page > imgLength - 1) {
        this.imgIndex = 0;
      } else if (page < 0) {
        this.imgIndex = this.data.length - 1;
      }
    }
  }
</script>

<style lang="scss" scoped>

  .update_page {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    background: rgba(0, 0, 0, .7);
  }

  .next {
    @extend .update_page;
    right: 40px;
  }

  .prev {
    @extend .update_page;
    left: 40px;
  }

  .shade {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    /*display: none;*/
    text-align: center;

    .slider {
      display: inline-block;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 50%;
      white-space: nowrap;
      overflow: hidden;
      .slider-item {
        cursor: pointer;
      }
      ._detail {
        height: 20px;
        color: #fff;
        text-align: start;
        position: relative;
        width: 100%;
        margin-top: 5px;

        .right {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
  }
</style>
